<template>
  <Modal v-model:visible="isShowDia"   :title="t('paymentManagement_page_tips')">
    <div class="popup_body">
      <div class="form_card">
        <div class="form_container vertical">
          <div class="context">
            {{ t('bindBankCard') }}
          </div>
        </div>
      </div>
      <div class="submit_btn flex justify_center">
        <Btn height="44px" width="307px" @click="goUnbind" class="submit">
        <span> {{ t('unbind') }}</span>
          </Btn>
      </div>
    </div>
  </Modal>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import { computed, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';

const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
const Btn = defineAsyncComponent(() => import("@/components/Btn.vue"));

const router = useRouter();
const { t } = useI18n();
const emit = defineEmits(["update:visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const isShowDia = computed({
  get: function () {
    return props.visible;
  },
  set: function (value) {
    emit("update:visible", value);
  },
});
const goUnbind = () => {
  router.push({ path: '/paymentManagement' })
}
</script>

<style lang='scss' scoped>
.popup_body {
  .form_card {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 30px 20px;
  }
  .submit_btn {
    display: flex;
    justify-content: center;
  }
  .context{
    width: 307px;
    line-height: 21px;
  }
}
</style>